<template>
    <div>
      <header-tilte :title="title"></header-tilte>
      <div v-if="toType == 2" class="failMarg">
        <router-link :to="'/qds/orderList'">
          <img src="../../assets/img/warning.png"/>
          <p class="failPad">购买失败</p>
          <mu-button color="primary">下单订水</mu-button>
        </router-link>
      </div>
      <div v-if="toType == 1" class="failMarg">
        <router-link :to="'/qds/waterbilllist'">
          <img src="../../assets/img/warning.png"/>
          <p class="failPad">支付失败</p>
          <mu-button color="primary">返回</mu-button>
        </router-link>
      </div>
      <div v-if="toType == 3" class="failMarg">
        <router-link :to="'/goods'">
          <img src="../../assets/img/warning.png"/>
          <p class="failPad">支付失败</p>
          <mu-button color="primary" >返回</mu-button>
        </router-link>
      </div>
      <div v-if="toType == 4" class="failMarg">
        <router-link :to="'qds/bookingWater'">
          <img src="../../assets/img/warning.png"/>
          <p class="failPad">支付失败</p>
          <mu-button color="primary">返回</mu-button>
        </router-link>
      </div>
    </div>
</template>

<script>
    import HeaderTilte from "../../components/headerTilte";

    export default {
      data(){
        return{
          title:'支付失败',
          toType:0
        }
      },
      mounted(){
        this.toType = this.$route.query.toType;
      },
      components: {HeaderTilte},
      name: "fail"
    }
</script>

<style scoped>

  .failPad{
    padding: 3rem 0;
    font-size: 1rem;
    font-weight: bold;
    color: gray;
  }
  .failMarg .fa{
    font-size: 2rem;
    color: gray;
  }
  .failMarg{
    margin-top: 6rem;
  }
  img{
    width: 4rem;
    height: 4rem;
  }
</style>
